<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>技师管理系统</title>
    <style>
        table {
            border: black 2px solid;
            width: 400px;
            border-collapse: collapse;
            margin: auto;
        }

        th {
            border: black 1px solid;
            height: 25px;
            background-color: darkgray;
        }

        td {
            border: black 1px solid;
            height: 25px;
            /*居中*/
            text-align: center;
        }

        * {
            margin: 5px;
        }
        #last{
            text-align: center;
        }

    </style>
</head>
<body>
<table id="oneTab">
    <thead>
    <tr>
        <th>选中</th>
        <th>技师编号</th>
        <th>姓名</th>
        <th>不给这个技师上钟</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="oneStudent"></td>
        <td>9527</td>
        <td>桃谷绘里香</td>
        <td>
            <button type="button" onclick="deleteThisStudent(this)" name="but">删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="oneStudent"></td>
        <td>10086</td>
        <td>河北彩花</td>
        <td>
            <button type="button" onclick="deleteThisStudent(this)" name="but">删除</button>
        </td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><input type="checkbox" id="chooseAll" onclick="chooseAllStudents(this)"></td>
            <td><-全选</td>
            <td>删除选中-></td>
            <td>
                <input type="button" name="deleteAll" onclick="deleteAll()" value="删除选中的技师">
            </td>
        </tr>
    </tfoot>
</table>
<div id="last">
    <table border="0px">
        <tr>
            <td>技师编号:</td>
            <td><input type="number" placeholder="请输入技师的编号" id="studentId"></td>
        </tr>
        <td>姓名:</td>
        <td><input type="text" placeholder="请输入姓名" id="studentName"></td>
    </table>
<button type="button" onclick="addStudent()" style="margin-left: 50px">添加技师</button>
</div>
</body>
</html>
<script>
    //添加技师
    function addStudent() {
        //获得写入的学生的id
        let id = document.getElementById("studentId").value;
        //获得写入的学生姓名
        let name = document.getElementById("studentName").value;
        //学生信息的tr元素
        let student = document.createElement("tr");
        //给tr添加子元素
        student.innerHTML =
            `<td><input type="checkbox" name="oneStudent"></td>
             <td>${id}</td>
             <td>${name}</td>
             <td>
               <button type="button" onclick="deleteThisStudent(this)" name="but">删除</button>
             </td>`;
        //获得tbody元素   这里获得的是一个数组  所以取数组的0号索引
        let tbody = document.getElementsByTagName("tbody")[0];
        //将学生挂到tbody上面
        tbody.appendChild(student);
        //清空填入的信息
        document.getElementById("studentId").value = "";
        document.getElementById("studentName").value = "";
    }
    //删除当前技师  吧当前技师的删除按钮对象传入 用来定位技师所在的tr元素
    function deleteThisStudent(button) {
        //获得当前学生的姓名弹出让用户确认
        let name = button.parentElement.previousElementSibling.innerText;
        //弹出提示 这个方法会出现两个按钮返货布尔类型
        let choose = window.confirm(`你确定要删除${name}吗?`);
        if(choose){
            //通过按钮标签对象当前学生的tr标签  然后删除
            button.parentElement.parentElement.remove();
        }
    }
    //选择全部技师  传入全部选择的对象
    function chooseAllStudents(allChoose) {
        //获得全部学生的选择项
        let allStudentChoose = document.getElementsByName("oneStudent");
        for (let stu of allStudentChoose) {
            stu.checked = allChoose.checked;
        }
    }
    //删除选中的技师
    function deleteAll() {
        let choose = window.confirm("你确定删除选中的技师吗?");
        if(!choose){
            return;
        }
        //获得所有学生的选中框
        let students = document.getElementsByName("oneStudent");
        //删除需要从后向前删除
        for (let i = students.length - 1; i >= 0; i--) {
            if(students[i].checked == true){
            students[i].parentElement.parentElement.remove();
            }
        }
        //将全选框的选择取消
            //获得全选框对象
        let but = document.getElementById("chooseAll");
        but.checked = false;
    }
</script>